<template>
  <view class="job-order-page">
    <!-- 顶部导航栏 -->
    <view class="header-nav">
      <view class="nav-content">
        <text class="nav-title">我的订单</text>
        <view class="nav-actions">
          <text class="iconfont-v2 icon-gengduo action-icon"></text>
          <text class="iconfont-v2 icon-xiaoxi action-icon"></text>
        </view>
      </view>
    </view>

    <!-- 订单状态标签栏 -->
    <view class="order-tab-bar">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'all' }"
        @click="switchTab('all')"
      >
        <text>全部</text>
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'pending' }"
        @click="switchTab('pending')"
      >
        <text>待付款</text>
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'paid' }"
        @click="switchTab('paid')"
      >
        <text>已付款</text>
      </view>
      <view class="filter-btn" @click="showFilter">
        <text>筛选</text>
        <text class="iconfont-v2 icon-xiala filter-icon"></text>
      </view>
    </view>

    <!-- 订单列表 -->
    <view class="order-list">
      <view 
        class="order-card" 
        v-for="(order, index) in filteredOrders" 
        :key="index"
      >
        <view class="card-header">
          <text class="order-date">{{ order.date }}</text>
          <text 
            class="order-status"
            :class="{
              'status-pending': order.status === 'pending',
              'status-paid': order.status === 'paid'
            }"
          >
            {{ order.statusText }}
          </text>
        </view>
        
        <view class="card-body">
          <text class="item-name">{{ order.itemName }}</text>
          <text class="package-details">{{ order.packageDetails }}</text>
          <view class="price-section">
            <text class="total-label">合计:</text>
            <text class="total-price">¥{{ order.totalPrice }}</text>
          </view>
        </view>
        
        <view class="card-actions" v-if="order.status === 'pending'">
          <view class="action-button cancel-button" @click="cancelOrder(order)">
            <text>取消订单</text>
          </view>
          <view class="action-button pay-button" @click="goToPay(order)">
            <text>去支付</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 筛选弹窗 -->
    <view class="filter-modal" v-if="showFilterModal" @click="hideFilter">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">筛选条件</text>
          <text class="iconfont-v2 icon-guanbi close-btn" @click="hideFilter"></text>
        </view>
        
        <view class="filter-options">
          <view class="filter-section">
            <text class="section-title">订单状态</text>
            <view class="option-list">
              <view 
                class="option-item" 
                v-for="(option, index) in statusOptions" 
                :key="index"
                :class="{ active: selectedStatus === index }"
                @click="selectStatus(index)"
              >
                <text>{{ option }}</text>
              </view>
            </view>
          </view>
          
          <view class="filter-section">
            <text class="section-title">订单类型</text>
            <view class="option-list">
              <view 
                class="option-item" 
                v-for="(option, index) in typeOptions" 
                :key="index"
                :class="{ active: selectedType === index }"
                @click="selectType(index)"
              >
                <text>{{ option }}</text>
              </view>
            </view>
          </view>
        </view>
        
        <view class="modal-footer">
          <button class="reset-btn" @click="resetFilter">重置</button>
          <button class="confirm-btn" @click="confirmFilter">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'all',
      showFilterModal: false,
      selectedStatus: -1,
      selectedType: -1,
      statusOptions: ["不限", "待付款", "已付款", "已取消"],
      typeOptions: ["不限", "职位刷新", "主动邀约", "简历置顶"],
      orders: [
        {
          id: 1,
          date: '2021.12.27 12:23',
          status: 'pending',
          statusText: '待付款',
          itemName: '职位刷新',
          packageDetails: '套餐: 10次/天 有效期 1天',
          totalPrice: '76.6'
        },
        {
          id: 2,
          date: '2021.12.27 12:23',
          status: 'paid',
          statusText: '已付款',
          itemName: '职位刷新',
          packageDetails: '套餐: 10次/天 有效期 1天',
          totalPrice: '76.6'
        },
        {
          id: 3,
          date: '2021.12.26 10:00',
          status: 'pending',
          statusText: '待付款',
          itemName: '主动邀约',
          packageDetails: '套餐: 5次/月 有效期 30天',
          totalPrice: '50.0'
        },
        {
          id: 4,
          date: '2021.12.25 15:30',
          status: 'paid',
          statusText: '已付款',
          itemName: '简历置顶',
          packageDetails: '套餐: 7天置顶 有效期 7天',
          totalPrice: '25.0'
        }
      ]
    }
  },
  computed: {
    filteredOrders() {
      if (this.activeTab === 'all') {
        return this.orders;
      } else {
        return this.orders.filter(order => order.status === this.activeTab);
      }
    }
  },
  methods: {
    switchTab(tab) {
      this.activeTab = tab;
    },
    showFilter() {
      this.showFilterModal = true;
    },
    hideFilter() {
      this.showFilterModal = false;
    },
    selectStatus(index) {
      this.selectedStatus = index;
    },
    selectType(index) {
      this.selectedType = index;
    },
    resetFilter() {
      this.selectedStatus = -1;
      this.selectedType = -1;
    },
    confirmFilter() {
      uni.showToast({
        title: '筛选条件已应用',
        icon: 'success'
      });
      this.hideFilter();
    },
    cancelOrder(order) {
      uni.showModal({
        title: '取消订单',
        content: `确定要取消订单"${order.itemName}"吗？`,
        success: (res) => {
          if (res.confirm) {
            const index = this.orders.findIndex(o => o.id === order.id);
            if (index !== -1) {
              this.orders.splice(index, 1);
              uni.showToast({
                title: '订单已取消',
                icon: 'success'
              });
            }
          }
        }
      });
    },
    goToPay(order) {
      uni.navigateTo({
        url: `/pages/bussiness/payment?orderId=${order.id}&amount=${order.totalPrice}`
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.job-order-page {
  min-height: 100vh;
  background: #f5f5f5;
}

/* 顶部导航栏 */
.header-nav {
  background: #ED6567;
  padding: 20rpx 30rpx;
  padding-top: calc(20rpx + env(safe-area-inset-top));
  
  .nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .nav-title {
      font-size: 36rpx;
      font-weight: 600;
      color: white;
    }
    
    .nav-actions {
      display: flex;
      gap: 20rpx;
      
      .action-icon {
        font-size: 32rpx;
        color: white;
      }
    }
  }
}

/* 订单状态标签栏 */
.order-tab-bar {
  background: white;
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 2rpx solid #f0f0f0;
  
  .tab-item {
    flex: 1;
    text-align: center;
    font-size: 28rpx;
    color: #666;
    padding: 16rpx 0;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &.active {
      color: #ED6567;
      font-weight: 600;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60rpx;
        height: 4rpx;
        background: #ED6567;
        border-radius: 2rpx;
      }
    }
  }
  
  .filter-btn {
    display: flex;
    align-items: center;
    gap: 8rpx;
    color: #666;
    font-size: 28rpx;
    margin-left: 30rpx;
    cursor: pointer;
    
    .filter-icon {
      font-size: 20rpx;
    }
  }
}

/* 订单列表 */
.order-list {
  padding: 20rpx 30rpx;
  
  .order-card {
    background: white;
    border-radius: 24rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      padding-bottom: 20rpx;
      border-bottom: 2rpx solid #f0f0f0;
      
      .order-date {
        font-size: 26rpx;
        color: #999;
      }
      
      .order-status {
        font-size: 28rpx;
        font-weight: 600;
        
        &.status-pending {
          color: #ED6567;
        }
        
        &.status-paid {
          color: #4CAF50;
        }
      }
    }
    
    .card-body {
      margin-bottom: 30rpx;
      
      .item-name {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 12rpx;
        display: block;
      }
      
      .package-details {
        font-size: 26rpx;
        color: #666;
        margin-bottom: 20rpx;
        display: block;
      }
      
      .price-section {
        display: flex;
        justify-content: flex-end;
        align-items: baseline;
        
        .total-label {
          font-size: 28rpx;
          color: #666;
          margin-right: 12rpx;
        }
        
        .total-price {
          font-size: 36rpx;
          font-weight: 600;
          color: #333;
        }
      }
    }
    
    .card-actions {
      display: flex;
      justify-content: flex-end;
      gap: 20rpx;
      
      .action-button {
        padding: 16rpx 32rpx;
        border-radius: 40rpx;
        font-size: 28rpx;
        text-align: center;
        min-width: 160rpx;
        cursor: pointer;
        transition: all 0.3s ease;
        
        &.cancel-button {
          background: white;
          color: #666;
          border: 2rpx solid #ccc;
          
          &:hover {
            background: #f8f9fa;
          }
        }
        
        &.pay-button {
          background: #ED6567;
          color: white;
          border: 2rpx solid #ED6567;
          
          &:hover {
            background: #d55a54;
          }
        }
      }
    }
  }
}

/* 筛选弹窗 */
.filter-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  
  .modal-content {
    background: white;
    width: 100%;
    max-height: 80vh;
    border-radius: 24rpx 24rpx 0 0;
    display: flex;
    flex-direction: column;
    
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 2rpx solid #f0f0f0;
      
      .modal-title {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
      }
      
      .close-btn {
        font-size: 32rpx;
        color: #999;
        cursor: pointer;
      }
    }
    
    .filter-options {
      flex: 1;
      padding: 30rpx;
      overflow-y: auto;
      
      .filter-section {
        margin-bottom: 40rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .section-title {
          font-size: 28rpx;
          font-weight: 600;
          color: #333;
          margin-bottom: 20rpx;
          display: block;
        }
        
        .option-list {
          display: flex;
          flex-wrap: wrap;
          gap: 16rpx;
          
          .option-item {
            background: #f8f9fa;
            color: #666;
            padding: 16rpx 24rpx;
            border-radius: 30rpx;
            font-size: 26rpx;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2rpx solid transparent;
            
            &.active {
              background: #fff5f5;
              color: #ED6567;
              border-color: #ED6567;
            }
          }
        }
      }
    }
    
    .modal-footer {
      display: flex;
      gap: 20rpx;
      padding: 30rpx;
      border-top: 2rpx solid #f0f0f0;
      
      .reset-btn {
        flex: 1;
        background: #f8f9fa;
        color: #666;
        border: none;
        border-radius: 50rpx;
        padding: 24rpx;
        font-size: 28rpx;
        cursor: pointer;
        transition: all 0.3s ease;
        
        &:hover {
          background: #e9ecef;
        }
      }
      
      .confirm-btn {
        flex: 1;
        background: #ED6567;
        color: white;
        border: none;
        border-radius: 50rpx;
        padding: 24rpx;
        font-size: 28rpx;
        cursor: pointer;
        transition: all 0.3s ease;
        
        &:hover {
          background: #d55a54;
        }
      }
    }
  }
}

/* 响应式适配 */
@media (max-width: 750rpx) {
  .order-list {
    padding: 20rpx 24rpx;
    
    .order-card {
      padding: 24rpx;
      
      .card-body {
        .item-name {
          font-size: 28rpx;
        }
        
        .package-details {
          font-size: 24rpx;
        }
        
        .price-section .total-price {
          font-size: 32rpx;
        }
      }
      
      .card-actions .action-button {
        padding: 12rpx 24rpx;
        font-size: 26rpx;
        min-width: 120rpx;
      }
    }
  }
}
</style>
